<template>
    <nav class="nav-box">
        <div class="nav-input">
            <input type="text" @focus="flag=true" @blur="hideBtn()" v-model="keyword">
        </div>
        <div class="nav-btn" v-show="flag">
            <span @mousedown="goSearch()">搜索</span>
        </div>
    </nav>
</template>

<script>
export default {
    data(){
        return {
            flag:false,
            keyword:''
        }
    },
    methods: {
        hideBtn(){
            this.flag = false
            this.keyword = ''
        },
        goSearch(){
            this.$router.push({
                path:'/films',
                query:{
                    keyword:this.keyword
                }
            })
        }
    },
}
</script>

<style lang="less">
    
</style>